<template>
    <a-drawer :maskClosable="false" :title="title" :width="800" placement="right" :closable="false" @close="close"
        :visible="visible">
        <component :is="currentComponents" :model="model" :disabled="disableSubmit" :ref="currentComponents"
            :templateDataList="templateDataList" v-if="visible"></component>
        <div class="drawer-footer">
            <a-popconfirm title="确定关闭弹窗吗?" @confirm="handleCancel" :getPopupContainer="(node) => node.parentNode">
                <a-button style="margin-bottom: 0;">关闭</a-button>
            </a-popconfirm>
            <a-button v-if="!disableSubmit" @click="handleOk" :disabled="buttonDisable" type="primary"
                style="margin-bottom: 0;">保存</a-button>
        </div>
    </a-drawer>
</template>
<script>
import AddMember from './addmember.vue'
import PerfectTaskChange from './perfectTaskChange.vue'
export default {
    name: "editTaskModal",
    components: {
        AddMember,
        PerfectTaskChange
    },
    props: {
        model: {
            type: Object,
            default: () => { }
        },
        templateDataList: {
            type: Array,
            default: () => []
        },
        disabled: {
            type: Boolean,
            default: false
        },
    },
    data() {
        return {
            visible: false,//弹窗展示
            disableSubmit: false,
            componentsName: "",
            currentComponents: "",
            title: "",
            buttonDisable: false
        }
    },
    watch: {
        disabled: {
            handler(val) {
                this.disableSubmit = val
            },
            immediate: true

        }
    },
    methods: {
        add(val) {
            this.visible = true
            // 显示对应的组件
            this.currentComponents = this.getComponents(val)
        },
        async edit(record, kind) {
            this.visible = true
            let obj = Object.assign({}, record)
            this.currentComponents = this.getComponents(kind)
            this.$nextTick(() => {
                obj = {
                    ...obj,
                    isRelatedTaskNode: obj.isRelatedTaskNode || 0,
                    taskNodeId: obj.taskNodeId || undefined,
                    isCollectionPayment: obj.isCollectionPayment || 0,
                    relatedTaskDisabled: obj.taskCompleteStatus == 2 && obj.isRelatedTask == 1,
                    isRelatedTaskNodeDisabled: obj.taskCompleteStatus == 2 && obj.isRelatedTaskNode == 1,
                }
                this.$refs[this.currentComponents].addModel = obj
            })
        },
        // 取消
        handleCancel() {
            this.visible = false
            this.$refs[this.currentComponents].addModel = {}
        },
        close() { },
        // 保存
        handleOk() {
            const model = this.$refs[this.currentComponents].emitForm()
            if (model) {
                this.$emit(this.currentComponents, model)
                this.handleCancel()
            }
        },
        getComponents(key) {
            let obj = {
                member: "AddMember",
                perfect: 'PerfectTaskChange'
            }
            return obj[key]
        }
    },
}
</script>
<style lang="less" scoped>
.drawer-footer {
    position: absolute;
    bottom: -8px;
    width: 100%;
    border-top: 1px solid #e8e8e8;
    padding: 10px 16px;
    text-align: right;
    left: 0;
    background: #fff;
    border-radius: 0 0 2px 2px;
    z-index: 9999999
}

.ant-btn {
    margin-left: 30px;
    margin-bottom: 30px;
    float: right;
}
</style>